<template>
	<div class="Tabs-click" >
		<div class="title1">
			<router-link to="/" >
				<p>个性游</p>
				<br/>
				<p class="gex">个性独创</p>
			</router-link>
		</div>
		<div class="title2" >
			<ul >
				<li v-for="item in titList1" :key="item.id" :style="'background-image:url('+item.src+')'"  >
					<router-link to="/" >
						{{item.name}}
					</router-link>
				</li>
			</ul>
		</div>
		<div class="title3" >
			<ul>
				<li v-for="item in titList2" :key="item.id" :style="'background-image:url('+item.src+')'"  >
					<router-link to="/" >
						{{item.name}}
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Tabs',
		data(){
			return{
				titList1 : [
					{ id : 1 , src : require('@/assets/img/iconimg/6.png') , name : '亲子游' },
					{ id : 2 , src : require('@/assets/img/iconimg/7.png') , name : '摄影游' },
					{ id : 3 , src : require('@/assets/img/iconimg/8.png') , name : '户外游' },
					{ id : 4 , src : require('@/assets/img/iconimg/9.png') , name : '活动赛事' },
					{ id : 5 , src : require('@/assets/img/iconimg/10.png') , name : '瑜伽行' },
					{ id : 6 , src : require('@/assets/img/iconimg/11.png') , name : '野奢邦' },
				],
				titList2 : [
					{ id : 1 , src : require('@/assets/img/iconimg/12.png') , name : '定制游' },
					{ id : 2 , src : require('@/assets/img/iconimg/13.png') , name : '签证' },
					{ id : 3 , src : require('@/assets/img/iconimg/14.png') , name : '邮轮' },
					{ id : 4 , src : require('@/assets/img/iconimg/15.png') , name : '美宿度假' }
				],
			}
		}
	}
</script>

<style>
	
	a
	{
		text-decoration: none;
		color: black;
	}
	.gex
	{
		width: 60%;
		height: 0.3rem;
		display: flex;
		margin: auto;
		align-items: center;
		justify-content: center;
		/* padding-top: 0.2rem; */
		background-color: yellow;
		font-size: 0.3rem;
		padding: 0 0.2rem;
		border-radius: 0.2rem;
		font-weight: bold;
		/* display: inline-block; */
	}
	.Tabs-click
	{
		font-size: 0.4rem;
		text-align: center;
	}
	.Tabs-click .title1
	{
		width: 25%;
		height: 2rem;
		float: left;
		background: url(../../../assets/img/iconimg/55.png);
		background-size: 100% 100%;
	}
	.Tabs-click .title1 p
	{
		text-align: center;
		line-height: 0.1rem;
	}
	.Tabs-click .title1 p:nth-child(1)
	{
		padding-top: 0.7rem;
	}
	.Tabs-click .title2
	{
		width: 75%;
		height: 2rem;
		float: left;
		text-align: center;
	}
	.Tabs-click .title2 ul li
	{
		width: 33.3%;
		line-height: 1rem;
		background: no-repeat center/center cover;
		background-size: 100% 100%;
		float: left;
	}
	.Tabs-click .title3
	{
		width: 100%;
		height: 2rem;
		float: left;
	}
	.Tabs-click .title3 ul li
	{
		width: 25%;
		line-height: 1rem;
		text-align: center;
		background: no-repeat center/center cover;
		background-size: 100% 100%;
		float: left;
	}
</style>
